<template>
  <div class="main-content item-box">
    <div class="item-left">
      <div class="column-item layui-row">
        <div class="column-item-title layui-row subject-second-color font-color1 font-bold">同类热门文章</div>
        <div class="jianjie-p layui-row">
          <ul class="remen-ul">
            <li v-for="item in groupEssayList" :key="item.id">
              <div class="remen-title layui-row">
                <a href="#">{{item.name}}</a>
              </div>
              <div class="remen-readnum layui-row">阅读：{{Math.ceil(Math.random()*100)}} &nbsp;&nbsp; 评论数:{{Math.ceil(Math.random()*100)}}</div>

            </li>

          </ul>
        </div>
      </div>
    </div>
    <div class="item-middle">
      <div class="article-content-box layui-row" >
        <div style="padding-left: 10px;padding-right:10px">
        <h1>{{essayInfo.name}}</h1>
        <div class="article-param layui-row">
          {{essayInfo.updateTime}}<span><a href="/content/21.html" title="大BUG">{{essayInfo.author}}</a></span><span>阅读数：86</span><span>评论数：0</span>&nbsp;&nbsp;
          <span class="hz-span layui-badge layui-bg-gray">vue</span>
          <span class="hz-span layui-badge layui-bg-gray">element-ui</span>
          <span class="hz-span layui-badge layui-bg-gray">表单数字</span>
        </div>
        <div class="article-prompt">
          版权声明：本文为博主原创文章，如果转载请给出原文链接
        </div>
        <div class="article-prompt"  v-if="essayInfo.prompt!=''">
          提示：{{essayInfo.prompt}}
        </div>
           <article v-html="essayInfo.text">

           </article>


      </div>
     <!-- <div class="comment-box layui-row">
        <div class="textarea-box layui-row">
          <textarea placeholder="仅支持纯文本，如果有什么文字无法描述的问题、建议、意见，请加QQ群"></textarea>
        </div>
        <div class="text-num-tips layui-row">还可以输入<span>500</span>个字</div>
        <div class="common-btnbox">
          <button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe642;</i>留言</button>
          <button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe66f;</i>登录</button>
        </div>
      </div>-->
    <!--  <div class="comment-list layui-row">
        <ul>
          <li>
            <div class="common-box-row layui-row">
              <div class="common-headimg layui-col-md1 layui-col-xs2">
                <div class="commonimg-box">
                  <img src="imgs/canreplace/headimg.jpg">
                </div>
              </div>
              <div class="common-info-row layui-col-md11 layui-col-xs10">
                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
              </div>
            </div>
          </li>
          <li>
            <div class="common-box-row layui-row">
              <div class="common-headimg layui-col-md1 layui-col-xs2">
                <div class="commonimg-box">
                  <img src="imgs/canreplace/headimg.jpg">
                </div>
              </div>
              <div class="common-info-row layui-col-md11 layui-col-xs10">
                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
              </div>
            </div>
          </li>
          <li>
            <div class="common-box-row layui-row">
              <div class="common-headimg layui-col-md1 layui-col-xs2">
                <div class="commonimg-box">
                  <img src="imgs/canreplace/headimg.jpg">
                </div>
              </div>
              <div class="common-info-row layui-col-md11 layui-col-xs10">
                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
              </div>
            </div>
          </li>
          <li>
            <div class="common-box-row layui-row">
              <div class="common-headimg layui-col-md1 layui-col-xs2">
                <div class="commonimg-box">
                  <img src="imgs/canreplace/headimg.jpg">
                </div>
              </div>
              <div class="common-info-row layui-col-md11 layui-col-xs10">
                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
              </div>
            </div>
          </li>
          <li>
            <div class="common-box-row layui-row">
              <div class="common-headimg layui-col-md1 layui-col-xs2">
                <div class="commonimg-box">
                  <img src="imgs/canreplace/headimg.jpg">
                </div>
              </div>
              <div class="common-info-row layui-col-md11 layui-col-xs10">
                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
              </div>
            </div>
          </li>
          <li>
            <div class="common-box-row layui-row">
              <div class="common-headimg layui-col-md1 layui-col-xs2">
                <div class="commonimg-box">
                  <img src="imgs/canreplace/headimg.jpg">
                </div>
              </div>
              <div class="common-info-row layui-col-md11 layui-col-xs10">
                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
              </div>
            </div>
          </li>
          <li>
            <div class="common-box-row layui-row">
              <div class="common-headimg layui-col-md1 layui-col-xs2">
                <div class="commonimg-box">
                  <img src="imgs/canreplace/headimg.jpg">
                </div>
              </div>
              <div class="common-info-row layui-col-md11 layui-col-xs10">
                <div class="common-nickname layui-row">2018-01-18 16:38<span>大BUG：</span></div>
                <div class="common-text layui-row">“每个强者都会有背后的辛酸挫折每个强者都会有背后的辛酸挫折”，说的非常好，条理清晰，通俗易懂，我这样的小白一看就懂，希望博主多分享一些类似文章。支持博主。都是按照已经用计算机语言编好的程序来执行的，程序是计算机要执行的指令的集合</div>
              </div>
            </div>
          </li>
        </ul>
      </div>-->
      </div>
    </div>
    <div class="item-right">
      <div class="column-item layui-row">
        <div class="column-item-title layui-row subject-second-color font-color1 font-bold">同类热门文章</div>
        <div class="jianjie-p layui-row">
          <ul class="remen-ul">
            <li v-for="item in groupEssayList" :key="item.id">
              <div class="remen-title layui-row">
                <a href="#">{{item.name}}</a>
              </div>
              <div class="remen-readnum layui-row">阅读：{{Math.ceil(Math.random()*100)}} &nbsp;&nbsp; 评论数:{{Math.ceil(Math.random()*100)}}</div>

            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "blogEssayInfo",
      data(){
        return {
           essayInfo:null,
           groupEssayList:null
        }
      },
        mounted() {
      /*    $('pre').addClass("line-numbers").css("white-space", "pre-wrap");*/
        },
       methods:{
         getEssayText() {
           let essayId=  this.$route.query.id;
           let  that=this;
           this.$axios({
             method: 'get',
             url: 'blog/artitleContextById?id='+essayId,
           })
             .then(function(res) {
               that.essayInfo=res.data.data;

               this.timer = setTimeout(() => {
                 $('pre').addClass("line-numbers").css("white-space", "pre-wrap");

                 Prism.highlightAll() // 这里加定时器让它后执行，不然没效果
               }, 0)

             });
         },
         getGroupEssayList() {
           let essayId=  this.$route.query.id;
           let  that=this;
           this.$axios({
             method: 'get',
             url: 'blog/getGroupEssayByEssayId?id='+essayId,
           })
             .then(function(res) {
               that.groupEssayList=res.data.data;


             });
         },
       },
        beforeCreate() {

        },
      created() {
        this.getEssayText();
        this.getGroupEssayList();
        }
    }

</script>
<style>
  .article-content-box{
    width: 100%;
    height: auto;

    position: absolute;
    padding-top: 15px;
    background-color: #ffffff;
    margin-top: 10px;
  }
  .article-content-box h1{
    font-size: 20px;
    text-align: center;
    font-weight: 500;
  }
  .article-param{
    height: 30px;
    margin-top: 12px;
    line-height: 30px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
  }
  .article-param span{
    margin-left: 16px;
  }
  .article-param .hz-span{
    margin-left: 0px;
    margin-right: 4px;
  }
  .article-prompt{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    border-bottom: 1px solid #e0e0e0;
  }
  article{
    margin-top: 10px;
  }
  article img{
    cursor: pointer;
  }
  article a{
    color: #1E9FFF;
  }

  .article-author{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: right;
    padding-right: 4px;
    margin-top: 40px;
  }
</style>
